<template>
	<view class="tuandui">
		<NavBar>
			<template #center>
				<view class="tabWrap">
					<view class="tabItem">
						<text>尊享服务</text>
					</view>
				</view>
			</template>
		</NavBar>

		<view class="mainWrap">
			<view class="hhr">
				<text class="">// 会员尊享权益 //</text>
			</view>
			<view class="conWrap">
				<view class="minconWrap topmincon">
					<view class="iconWarp">
						<image class="iconSty" src="../../../static/img/homeServer/icon_guanjia.png" mode=""></image>
						<text class="memlabel">管家</text>
						<text class="memDes">待办事项管理</text>
					</view>
					<view class="split"></view>
					<view class="iconWarp">
						<image class="iconSty" src="../../../static/img/homeServer/icon_renli.png" mode=""></image>
						<text class="memlabel">HR</text>
						<text class="memDes">人力资源管理</text>
					</view>
				</view>
				<view class="minconWrap">
					<view class="iconWarp">
						<image class="iconSty" src="../../../static/img/homeServer/icon_caiwu.png" mode=""></image>
						<text class="memlabel">财务</text>
						<text class="memDes">统计报表管理</text>
					</view>
					<view class="split"></view>
					<view class="iconWarp">
						<image class="iconSty" src="../../../static/img/homeServer/icon_tuandui.png" mode=""></image>
						<text class="memlabel">团队</text>
						<text class="memDes">更多权益待续</text>
					</view>
				</view>

				<view class="fooMember">
					<view class="conPrice">
						<text class="priLabel">开通{{cur===0 ? '一个月':'一年'}}会员</text>
						<view class="priceWrap">
							<view class="swarp" @tap="changeClick(0)"
								:style="{'borderColor':cur===0 ? '#af6d25':'#000'}">
								<text class="priceUnit" :style="{'color': cur===0 ? '#af6d25':'#000'}">¥</text>
								<text class="price" :style="{'color': cur===0 ? '#af6d25':'#000'}">39.9</text>
								<text class="year" :style="{'color': cur===0 ? '#af6d25':'#000'}">(一个月)</text>
							</view>
							<view class="swarp" @tap="changeClick(1)"
								:style="{'borderColor':cur===1 ? '#af6d25':'#000'}">
								<text class="priceUnit" :style="{'color': cur===1 ? '#af6d25':'#000'}">¥</text>
								<text class="price" :style="{'color': cur===1 ? '#af6d25':'#000'}">188</text>
								<text class="year" :style="{'color': cur===1 ? '#af6d25':'#000'}">(一年)</text>
							</view>

						</view>
						<text class="pricedes">权益说明：</text>
						<text class="pricedes">开通会员后即可享受尊享权益</text>
					</view>
				</view>

				<view class="xieyiWarp">
					<!-- <label>
						<checkbox :value="1" />
						<text class="xyText">点击立即购买表明您已阅读并同意《会员服务协议》</text>
					</label>
					<button @tap="openPayType" class="botBtn" type="default">立即购买</button> -->

					<radio :checked="isAgree" style="transform: scale(0.7)" @tap="isAgree = !isAgree"></radio>
					<text class="xyText">点击立即购买表明您已阅读并同意</text>
					<text v-for="(item, index) in agreementList" :key="index"
						style="display: flex; align-items: center; flex-wrap: wrap">
						<text v-if="item.id === 2" style="color: #6b64d3; font-size: 24rpx"
							@tap="touchAgreement(item)">《{{ item.agreementTitle }}》</text>
					</text>
				</view>

				<view class="bottomWrap">
					<button @tap="openPayType" class="botBtn" type="default">立即购买</button>
				</view>

				<u-popup :round="20" :zIndex="9999" :show="data.show" @close="data.show = false">
					<view class="confirmOrderBottom">
						<view class="top">
							<text></text>
							支付
							<image @tap="data.show = false" src="/static/img/index/101.png" mode="widthFix"></image>
						</view>
						<view class="confirmOrderBottom_1">
							<view v-for="(item, index) in paymentChannels" :key="index" class=""
								@tap="data.payChannel = item.value">
								<view class="left">
									<image :src="'/static/img/index/' + item.icon + '.png'" mode="widthFix"></image>
									{{ item.name }}
								</view>
								<image
									:src="data.payChannel == item.value ? '/static/img/index/49.png' : '/static/img/index/52.png'"
									mode="widthFix"></image>
							</view>
						</view>
						<view class="bot">
							<view class="left"></view>
							<view class="right" @tap="pay">立即支付</view>
						</view>
					</view>
				</u-popup>
			</view>
		</view>

		<uni-popup ref="popup" type="bottom" border-radius="32rpx 32rpx 0 0">
			<scroll-view class="popupWrap">
				<view class="popupTitle">{{ popupTitle }}</view>
				<scroll-view scroll-y="true" style="width: 100%; height: 72vh; margin-bottom: 3vh">
					<rich-text :nodes="popupContent"></rich-text>
				</scroll-view>
			</scroll-view>
		</uni-popup>
		<SanshuiPaymentPassword v-if="data.show1" :onConfirm="data.onConfirm" :onCancel="()=>{data.show1 = false}" />
	</view>
</template>

<script setup lang="ts">
	import { onLoad } from '@dcloudio/uni-app';
	import { reactive, ref } from 'vue';
	import SanshuiPaymentPassword from '@/components/sanshui-payment-password/sanshui-payment-password.vue'
	import NavBar from '@/components/navBar.vue';
	import { paymentChannels, payment } from '@/utils/index';
	import { queryAgreement, rechargeVip } from '@/utils/api/index.ts';
	const data = reactive<any>({
		onConfirm: () => { },
		payChannel: paymentChannels[0].value
	});
	const isAgree = ref(false); //是否同意了协议
	const agreementList = ref([]);
	const cur = ref(0);

	onLoad(() => {
		loadAgreement();
	});

	// 协议触发
	const popup = ref<InstanceType<typeof Popup> | null>(null);
	const popupTitle = ref('');
	const popupContent = ref<any>();
	const touchAgreement = (item : any) => {
		popupTitle.value = item.agreementTitle;
		popupContent.value = item.agreementContent;
		popup.value.open('bottom');
	};

	const changeClick = (num : number) => {
		cur.value = num
	}

	const loadAgreement = async () => {
		const res = await queryAgreement({
			data: {
				agreementType: 'LOGIN'
			}
		});
		agreementList.value = res.data;
	};

	const openPayType = () => {
		if (!isAgree.value) {
			uni.showToast({
				title: '请先同意服务协议',
				icon: 'none'
			});
			return;
		}
		data.show = true;
	};

	const pay = () => {
		data.show = false;
		if (data.payChannel == 'WALLET') {
			data.show1 = true;
			data.onConfirm = (e) => {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				rechargeVip({ data: { businessType: 'RECHARGE_VIP', payChannel: data.payChannel, openType: cur.value === 0 ? 'month' : 'year', payPwd: e } })
					.then((res) => {
						uni.hideLoading();
						payment(data.payChannel, res.data).then((res) => {
							setTimeout(() => {
								uni.navigateBack();
							}, 1000);
						});
					})
					.catch(() => {
						uni.hideLoading();
					});
			}
			return
		}
		uni.showLoading({
			title: '加载中...',
			mask: true
		});
		rechargeVip({ data: { businessType: 'RECHARGE_VIP', payChannel: data.payChannel, openType: cur.value === 0 ? 'month' : 'year' } })
			.then((res) => {
				uni.hideLoading();
				payment(data.payChannel, res.data).then((res) => {
					setTimeout(() => {
						uni.navigateBack();
					}, 1000);
				});
			})
			.catch(() => {
				uni.hideLoading();
			});
	};
</script>

<style lang="scss" scoped>
	:deep(.navBarTop) {
		background-color: transparent;
		color: #fff;
	}

	page {
		background-color: #ffd69b;
		height: 100%;
	}

	.tuandui {}

	.mainWrap {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 60rpx;
	}

	.hhr {
		margin-bottom: 48rpx;

		text {
			width: 398rpx;
			height: 64rpx;
			font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
			font-weight: normal;
			font-size: 42rpx;
			color: #47423b;
			line-height: 64rpx;
			letter-spacing: 6px;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}
	}

	.tabWrap {
		background-color: #494949;
		padding: 8rpx;
		border-radius: 12rpx;

		.tabItem {
			background-color: #ffe0b4;
			border-radius: 16rpx;
			padding: 6rpx 16rpx;
		}
	}

	.conWrap {
		width: 702rpx;
		height: 832rpx;
		background: linear-gradient(180deg, #3a3a3a 0%, #494949 81%);
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}

	.topmincon {
		margin-top: 24rpx;
	}

	.minconWrap {
		display: flex;
		align-items: center;
		padding: 24rpx 0;
	}

	.iconWarp {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.iconSty {
		width: 96rpx;
		height: 96rpx;
	}

	.split {
		width: 6rpx;
		height: 42rpx;
		background: rgba(255, 224, 180, 0.16);
		border-radius: 4rpx 4rpx 4rpx 4rpx;
	}

	.memlabel {
		width: 166rpx;
		height: 48rpx;
		font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
		font-weight: normal;
		font-size: 32rpx;
		color: #ffffff;
		line-height: 48rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	.memDes {
		width: 166rpx;
		height: 42rpx;
		font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
		font-weight: normal;
		font-size: 28rpx;
		color: #b7a387;
		line-height: 42rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	.fooMember {
		width: 654rpx;
		height: 261rpx;
		background-image: url('../../../static/img/homeServer/memberbg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 2 2;
		margin-left: 24rpx;
		margin-top: 48rpx;
	}

	.conPrice {
		display: flex;
		flex-direction: column;
		padding: 32rpx;
	}

	.priLabel {
		height: 42rpx;
		font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
		font-weight: normal;
		font-size: 28rpx;
		color: #af6d25;
		line-height: 42rpx;
	}

	.priceUnit {
		width: 19rpx;
		height: 48rpx;
		font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
		font-weight: normal;
		font-size: 32rpx;
		color: #000000;
		line-height: 48rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	.price {
		width: 51rpx;
		height: 64rpx;
		font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
		font-weight: bold;
		font-size: 32rpx;
		color: #2f3030;
		line-height: 64rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	.priceWrap {
		margin-bottom: 24rpx;
		display: flex;

		.swarp {
			border: 1px solid #af6d25;
			border-radius: 8rpx;
			margin-right: 36rpx;
			padding: 0 12rpx;
			margin-top: 12rpx;

			.year {
				font-size: 26rpx;
			}
		}
	}

	.pricedes {
		width: 345rpx;
		height: 36rpx;
		font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
		font-weight: normal;
		font-size: 24rpx;
		color: #c99761;
		line-height: 36rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.xyText {
		font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
		font-weight: normal;
		font-size: 24rpx;
		color: #8c8c8c;
		line-height: 36rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	.xieyiWarp {
		margin-top: 160rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.botBtn {
		width: 638rpx;
		height: 92rpx;
		line-height: 92rpx;
		background: #454545;
		box-shadow: 0rpx 12rpx 24rpx 0rpx rgba(118, 104, 94, 0.3);
		border-radius: 46rpx 46rpx 46rpx 46rpx;
		color: #fff;
		margin-top: 34rpx;
	}

	.confirmOrderBottom_1 {
		>view {
			justify-content: space-between;
			// padding: 37rpx 35rpx;
			background: #fff;
			display: flex;
			align-items: center;
			margin-top: 32rpx;

			.left {
				display: flex;
				align-items: center;

				image {
					width: 48rpx;
					margin-right: 25rpx;
				}

				font-size: 24rpx;
			}

			>image {
				width: 36rpx;
			}
		}
	}

	.confirmOrderBottom {
		padding: 24rpx 43rpx;

		.top {
			display: flex;
			align-items: center;
			justify-content: space-between;

			image {
				width: 30rpx;
			}

			text {
				width: 30rpx;
			}

			font-size: 32rpx;
		}

		.bot {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 30rpx;

			.left {
				display: flex;
				flex-direction: column;
				font-size: 24rpx;

				text {
					margin-top: 10rpx;
					color: #ff263f;
				}
			}

			.right {
				width: 190rpx;
				line-height: 80rpx;
				background: #ff263f;
				text-align: center;
				border-radius: 80rpx;
				color: #fff;
			}
		}
	}

	.popupWrap {
		width: 100%;
		height: 80vh;
		padding: 24rpx;
		background-color: #ffffff;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
	}

	/* 公告题目样式 */
	.popupTitle {
		width: 100%;
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 16rpx;
		color: #333333;
	}

	.bottomWrap {
		padding-bottom: 100rpx;
	}
</style>